<template>
  <tool-page title="生成随机银行卡号" :value="value" @generate="generate" :remark="remark">
    <template #buttonBefore>
      银行：
      <i-select v-model="bankIndex" style="width:200px" @on-change="onBankChange">
        <template #prefix>
          <m-icon v-if="bank" :name="bank.font_class" size="16" tran-y="0.4" style="margin-right: 6px"></m-icon>
        </template>
        <i-option v-for="(bankItem, index) in bankList" :value="index" :key="bankItem.code">
          <div style="text-align: left">
            <m-icon :name="bankItem.font_class" size="16"></m-icon>
            {{ bankItem.name }}
          </div>
        </i-option>
      </i-select>
    </template>
  </tool-page>
</template>

<script>

import MIcon from "@/components/MIcon";

export default {
  name: "RandBankNumber",
  components: {MIcon},
  data() {
    return {
      value: '',
      bankList: [],
      bankIndex: null,
      bank: null,
      remark: '生成随机的随机银行卡号，可选择指定银行（条件有限，非全部银行）'
    }
  },
  methods: {
    generate() {
      this.value = this.simpleUtils.randomBankNumber(this.bank ? this.bank.code : '')
    },
    onBankChange() {
      this.bank = this.bankList[this.bankIndex];
      this.generate();
    }
  },
  created() {
    this.generate();
    this.bankList = this.simpleUtils.getHasPrefixBankList();
  }
}
</script>

<style lang="scss" scoped>
:deep(.ivu-select-selection) {
  text-align: left;
}
</style>
